CSS

排版
CSS属性类别
- 文字，段落
- 清单
- 定位
  - position:设定「物件定位时所要的参考对像」
    
    static (静态定位)
    
    relative :relative 所参考的空间是物件本身位於资料流内的原始位置，
    
    fixed：参考空间设定为「视窗」，该物件的参考空间就直接对视窗的范围了，需要特别注意的是fixed定位与absolute，一样都会自己独立一层
    
    fixed 除了将参考空间设定为视窗与自己独立一层外，也由于定位的空间是定在视窗内，所以不管你如何卷动你的视窗卷轴，这个物件就是怎样都不会换位置，但 absolute 若定位在视窗的话则会被卷走
    
    常见的「盖版广告」或者是「光箱效果 /light box」，又或者是Bootstrap中的「modal 组件」，以及常见的网页导览列要固定在视窗上方的效果，再不然就是经常出现在视窗右下角的那一个「回到页面顶端」的区块，都是普遍会使用到 fixed 定位的
    
    absolute ：absolute 则是会从资料流中抽离，自己独立一个层，并参考父层空间作為定位的空间。倘若没有任何一个父层空间俱备定位设定，最终该物件将採用视窗空间座位参考空间。
    
    当物件设定了 absolute 之后，将会自己独立一层，不会与其它物件有任何关连，所以可以利用 absolute 来做到物件堆叠的视觉效果
    
    sticky ：它同时结合了 relative 与 fixed 两大特性，这个定位的特色是
    
    预设定位在父层空间
    
    当视窗卷动到该物件位置时，会依据对该物件所设定的 top 值来让该物件呈现 fixed 在视窗的效果
    
    当物件呈现 fixed 效果时，其所能 fixed 的空间是该物件的父层空间
    
    当视窗往下卷到超过 sticky 物件的父层空间时，sticky物件则不会再呈现 fixed 的效果，而是会被卷离视窗范围。
    
    总之，设定为 sticky 的物件会跟着卷轴移动，但也仅限于「在父层空间内」移动，一但视窗卷超过父层空间的话，sticky就会被卷离开了
  - top 与 bottom 择一设定，以及 left 与 right 择一设定，可以发现到了吧，基本上就是水平轴只要设定一个属性，垂直轴也只要设定一个属性即可，像是盖版广告、光箱效果... 等，都很适用这样的作法
- 尺寸设定：一个物件的宽度大小，基本上可以说是「width、padding、border、margin」四个属性的组成
  - min-width、max-width、min-height、max-height：将一个物件的「尺寸限制在一个区段范围内」
    
    width与 height 的值基本上只需要一个就好。你的物件必须是 inline 物件以外的特性，像是block、inline-block、flex item、list-item，又或者是表格、储存格这类属性，所以简言之就是 inline 类型的物件是不支援 width 与 height 的，
  - box-sizing：控制 width 与 height 作用的对象空间
    
    Content-box (宽高设定作用在内容范围)
    
    Border-box （宽高设定作用在边框外缘的范围内）：padding 与 border-width 都直接内推了。从 1 个字宽 20px 来计算，8 * 20 = 160px，加上 padding 左右各 20px，就能得到目前显示的结果是200px。20 * 6 + 20 * 2 + 20 * 2 = 200px
  - margin与 padding 分别控制物件的外部距离与内部距离
    
    margin 使用百分比为单位的时候，是依据父层的内容空间 (Content box) 做为百分百，所以如果我对一个物件设定了 margin-left: 10%; 的话，那就表示 margin-left 将会是父层 width 属性值的10%，切记计算时千万别算错了喔。
    
    padding 设定百分比这个单位时，不管是上或下或左或右，都是采用父层的内容空间 (Content box) 的「宽」做为百分百，再次强调！！！不管「上下左右」，都是采用「父层的宽」做为百分百，
    
    px
    
    %：其实就是 padding 以内的空间
    
    em
    
    ex
    
    vw：百分之百的「视窗」宽度。视窗宽度中是不包含卷轴在内的，也就是说 100vw 会等于是视窗的左边缘到右边缘，那么当你的视窗出现卷轴时会怎么样呢？这时你的宽度就会因为卷轴的关系，导致宽度过宽，而让你的画面出现了横向卷轴。但 width: 100% 却不会有这问题，因为它的宽度是父层的可用空间，而非视窗的宽度。
    
    vh
- 背景
- 边框
- 色彩
- 排版
  - display：display可以改变一个物件的基本特性，就如同把水变成冰块一般，水原本是软性可流动的，变成冰块后它就变成硬性不能流动了
  - 垂直居中
    
    absolute + margin 負值的垂直置中方式
    
    利用 top:50% 以及 left:50% 来将网页物件定位在距离空间左侧 50% 以及空间顶端 50% 的位置，这时物件的左上角端点是位于空间的正中间的。
    
    接者我们使用 margin-top 属性，将数值设定成物件自身一半的高度 (采用负值)
    
    absolute + margin: auto 垂直置中方式
    
    这个原理我们其实也同样可以运用在 position:fixed 定位属性上，像是盖板广告 (好负面的例子) 就是这样制作的。此外一些光箱 (跳窗) 效果也是这样制作的喔。
    
    当物件设定绝对定位之后，预设它是抓不到整体可运用空间的范围，所以 margin: auto 此时会失效。但当你设定了 top: 0; bottom: 0 时，绝对定位物件垂直置中于父层。如果你的绝对定位物件需要水平置中于父层，那你同样可以设定 left: 0; right:
    
    需要使用 absolute 搭配 top & bottom 来让 margin:auto 能正常计算出来，若是要用比较浅白的解释的话，会这么解释:
    
    『当你将物件设定成绝对定位后，此时你的物件将自己位于一个层，此时尚未知道这一层的空间大小多少，但是一旦将物件设定 top:0 以及 bottom:0 时，此时浏览器将会计算空间顶端跟底端的空间尺寸，这时你的空间大小就能够被取得了，接着我们的 margin:auto (margin-left 与 margin-right 设定为 auto)就生效啰。』
    
    此方式的缺点是你的定位物件必须有固定的宽高（％数也可）才能正常置中。
    
    6.absolute + translate (-50%, -50%) 垂直置中方式
    
    我们不用计算垂直置中物件的宽与高，我们使用 translate (-50%,-50%) 的意思是，让物件的 X 轴移动 - 50%，此 50% 是以物件本身的宽度作为 100% 来做计算，所以不管你的物件宽度是多少，他都会自动跑负一半的位置，可谓方便至极阿！
    
    relative + translateY (-50%) 垂直置中方式
    
    top: 50% 的招式，让你的物件上方能产生固定％数的距离，让子物件的上方空出 50% 的父层高度后
    
    translate 的百分比单位是利用物件自身的尺寸作为 100% ，这样让我们要利用物件自身宽高做事变得方便很多呢！-----让物件向上移动 50% 自身高度
    
    Flex + margin 垂直置中方式(Flex以（行）的概念切网页)
    
    7.Flex + align-items 垂直置中方式：Flex 次轴的对齐方式
    
    Flex 排版使用了行的概念，将网页资料分成直的跟横的，不管分成直或横都还是用单一一个「行」的概念在看待的，在 Flex 中预设子层资料是横排且不换行的，我们可以利用 align-items 这个属性来设定该子层资料垂直于「行」方向的位置，简单的说，倘若资料预设是横排 (X 轴)，那么 align-items 就是直排 (Y 轴) 的方向，但是倘若资料是直排 (Y 轴) 的话，那么 align-items 控制的就是横排 (X 轴) 的方向，
    
    左图右文版面的垂直置中 2
    
    11.Flex + align-content 垂直置中方式：align-conent 仅能对次轴多行 flex item 做置中，单行无效
    
    为了不增加 HTML TAG 的数量，所以采用了 CSS 伪类来当作额外添加的首行与末行，这样我们就可以达到多行子物件的情境了，如此一来也就能让 align-content 产生作用了
    
    注意的重点就是 align-content 只针对多行子物件这种状况有效，若是仅有单行子层的话是无效的
    
    10.Flex + align-self 垂直置中方式：只对 flex 次轴 (cross axis) 的个别对齐方式
    
    8.Flex + before + flex-grow 垂直置中方式
    
    Grid + template 垂直置中方式（以(行)(列)的概念切网页）
    
    CSS grid 最令人惊艳的就是这个 template 的功能了，简直就是把区块当画布在使用一般。CSS 来对区块建构隐形的格线，方便我们将内容放置于目标格子内
    
    利用 grid-template-rows 将父层区块分割成三个横列，接着利用 grid-area 属性给与子层一个区域 (area) 名称，最后在父层使用 grid-template-areas 来把该子层区域放置到我要的「格子」中即可。
    
    grid-template-areas 这个属性中「值」的设定，这边其实就是画格子的概念，当我的格子想预留空值的时候 (不分配子层项目)，我们可以直接使用一个「.」来作占位，
    
    Grid + align-items 垂直置中方式
    
    align-items 不仅是 Flex 可用，连 CSS grid 也拥有此属性可使用，但在 Flex 中 align-items 是针对次轴 (cross axis) 作对齐，而在 CSS Grid 中则是针对Ｙ轴作对齐，你可以把他想像成是表格中储存格的 vertical-align 属性看待，就可以很容易理解了
    
    指定此格子的内容对齐 Y 轴中间即可
    
    Grid + align-content 垂直置中方式：来对子项物件做垂直置中
    
    Grid + align-self 垂直置中方式：对 grid Y 轴的个别对齐方式、子物件本身做 Y 轴的对齐
    
    Grid + place-items 垂直置中方式
    
    Grid + place-content 的垂直置中方式：Grid + place-content 制作垂直置中区块
    
    Grid + margin 垂直置中方式
    
    ::before + inline-block 达到垂直置中：多行垂直置中
    
    Line-height：单行文字垂直置中（Line-height 来取代 height 属性）
    
    灯箱效果（登入区块、注册画面、回应区块、弹出式讯息）：
    
    左图右文版面的垂直置中
    
    RWD 网页等比例的区块，我该如何选择垂直置中的方式？
    
    等比例区块的制作通常我们会使用父层的空间来处理，一种是用 padding-bottom 或padding-top(二择一) 并搭配百分比的单位来处理
    
    .amos-box2{ width: 100%; height: 0; padding-bottom: 50%;}
    
    .amos-box2{ width: 100%; height: 0; padding-bottom: 50%; position: relative;}.amos-box2 .content{ position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
CSS作用对象
- 自己
- 子层
- 自己跟子层
- 是否对周遭物件产生影响（对周遭物件可能产生空间的挤压）

以上内容整理于幕布文档